<template>
  <div class="containerBox">
    <div class="topSearch">
      <span>一级分类</span>
      <el-select v-model="chooseDate1" placeholder="请选择">
        <el-option
          v-for="item in goodsListDate1"
          :key="item.id"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
      <span>二级分类</span>
      <el-select v-model="chooseDate2" placeholder="请选择">
        <el-option
          v-for="item in goodsListDate2"
          :key="item.id"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
      <span>三级分类</span>
      <el-select v-model="chooseDate3" placeholder="请选择">
        <el-option
          v-for="item in goodsListDate3"
          :key="item.id"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
      <span>商品名称</span>
      <el-input placeholder="请输入" type="text" v-model="inputDate"></el-input>
      <span>状态</span>
      <el-select v-model="chooseDate4" placeholder="请选择">
        <el-option
          v-for="item in goodsListDate4"
          :key="item.id"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button class="search">搜索</el-button>
    </div>
    <div class="batchOperation">
      <button class="hover">批量删除</button>
      <button class="hover">批量下架</button>
      <button class="hover">批量上架</button>
    </div>
    <div class="tableList">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="65"></el-table-column>
        <el-table-column property="goodsCode" label="商品编码"></el-table-column>
        <el-table-column property="goodsName" label="商品昵称"></el-table-column>
        <el-table-column property="firstClass" label="一级分类"></el-table-column>
        <el-table-column label="商品标签">
          <template slot-scope="scope">
              <span class="tagS" v-for="item in scope.row.goodsTag" :key="item.id">{{item.name}}</span>
          </template>
        </el-table-column>
        <el-table-column property="goodsPrice" label="价格"></el-table-column>
        <el-table-column property="goodsStock" label="总库存"></el-table-column>
        <el-table-column property="goodsSales" label="销量"></el-table-column>
        <el-table-column property="goodsState" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a class="oper" @click="operation('detail')">详情</a>
            <a class="oper" @click="operation('modify')">修改</a>
            <a class="oper" @click="operation('delete')">删除</a>
            <a class="oper" @click="operation('lower')" v-if="scope.row.goodsState === '已上架'">下架</a>
            <a class="oper" @click="operation('upper')" v-else>上架</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="tableData.length">
      </el-pagination>
      <el-dialog title="商品详情" :visible.sync="detailLog" :close-on-click-modal="false">
        <p>商品编码： {{checkComDetail.commodityCode}}</p>
        <p>商品名称： {{checkComDetail.name}}</p>
        <p>商品分类：{{checkComDetail.firstCategoryName}} > {{checkComDetail.secondCategoryName}} > {{checkComDetail.thirdCategoryName}} </p>
        <div class="guige">
          <span>商品规格：</span>
          <div class="guiGe" v-if="checkComDetail.specShowVOList && checkComDetail.specShowVOList.length > 0">
            <div v-for="item in checkComDetail.specShowVOList" :key="item.specId">
              <p>规格名称： {{item.specKey}}</p>
              <p class="guigezhi">规格值： <span v-for="items in item.specValueVOList" :key="items.specValueId">{{items.specValue}}</span></p>
            </div>
          </div>
          <span v-else>无</span>
        </div>
        <div class="guige jiagekucun">
          <span>价格库存：</span>
          <table class="guiGe" v-if="checkComDetail.commodityDetailShowVOList && checkComDetail.commodityDetailShowVOList.length > 0">
            <tr>
              <th v-for="(item,index) in JSON.parse(checkComDetail.commodityDetailShowVOList[0].unionSpec)" :key="index">{{item.key}}</th>
              <th>价格（元）</th>
              <th>划线价（元）</th>
              <th>库存</th>
              <th>商品条形码</th>
            </tr>
            <tr v-for="item in checkComDetail.commodityDetailShowVOList" :key="item.id">
              <td v-for="(subItem,subIndex) in JSON.parse(item.unionSpec)" :key="subIndex">{{subItem.value}}</td>
              <td>{{item.price}}</td>
              <td>{{item.linePrice}}</td>
              <td>{{item.stock}}</td>
              <td>{{item.barcode}}</td>
            </tr>
          </table>
          <table class="guiGe" v-else>
            <tr>
              <th>价格（元）</th>
              <th>划线价（元）</th>
              <th>库存</th>
            </tr>
            <tr>
              <td>{{checkComDetail.defaultPrice}}</td>
              <td>{{checkComDetail.defaultLinePrice}}</td>
              <td>{{checkComDetail.defaultStock}}</td>
            </tr>
          </table>
        </div>
        <p class="tag">商品标签：
          <span v-if="checkComDetail.commodityTagVOList && checkComDetail.commodityTagVOList.length > 0">
          <b v-for="item in checkComDetail.commodityTagVOList" :key="item.parentTagId">{{item.parentTagName}} > {{item.tagName}}</b>
        </span>
        </p>
        <div class="guige pictureB">
          <span>商品图片：</span>
          <div class="guiGe pictureS" >
            <div class="imgB" v-for="(item,index) in checkComDetail.commodityPictureVOList" :key="index">
              <img :src="item.url" alt="">
            </div>
          </div>
        </div>
        <div class="guige comDetailB">
          <span>商品详情：</span>
          <div class="guiGe comDetailS" >
            <p>详情标题：{{checkComDetail.detailTitle}}</p>
            <p>商品描述：{{checkComDetail.sketch}}</p>
            <div class="imgB">
              <span>图文详情：</span>
              <img v-if="checkComDetail.commodityDetailPictureVO && checkComDetail.commodityDetailPictureVO.url" :src="checkComDetailcheckComDetail.commodityDetailPictureVO.url" alt="">
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodsList',
  data () {
    return {
      checkComDetail: {
        commodityCode: '22222222222222222222222222',
        name: 'test',
        firstCategoryName: 'DOG',
        secondCategoryName: 'LINGSHI',
        thirdCategoryName: 'AAAAA',
        specShowVOList: [
          {
            specKey: '重量',
            specValueVOList: [
              {
                specValueId: 1,
                specValue: '1kg'
              }, {
                specValueId: 2,
                specValue: '2kg'
              }
            ]
          }
        ],
        commodityDetailShowVOList: [],
        commodityTagVOList: [
          {
            parentTagId: 2,
            tagName: '肉质零食'
          }
        ],
        commodityPictureVOList: [],
        detailTitle: '详情标题',
        sketch: '商品描述',
        commodityDetailPictureVO: []
      },
      detailLog: false,
      pageSize: 10,
      currentPage: 1,
      // 搜索条件
      goodsListDate1: [
        {
          value: '不限',
          id: ''
        }, {
          value: '狗',
          id: 1
        }, {
          value: '猫',
          id: 2
        }, {
          value: '飞禽',
          id: 3
        }, {
          value: '走兽',
          id: 4
        }
      ],
      chooseDate1: '',
      goodsListDate2: [
        {
          value: '不限',
          id: ''
        }, {
          value: '狗',
          id: 1
        }, {
          value: '猫',
          id: 2
        }, {
          value: '飞禽',
          id: 3
        }, {
          value: '走兽',
          id: 4
        }
      ],
      chooseDate2: '',
      goodsListDate3: [
        {
          value: '不限',
          id: ''
        }, {
          value: '狗',
          id: 1
        }, {
          value: '猫',
          id: 2
        }, {
          value: '飞禽',
          id: 3
        }, {
          value: '走兽',
          id: 4
        }
      ],
      chooseDate3: '',
      goodsListDate4: [
        {
          value: '不限',
          id: ''
        }, {
          value: '已上架',
          id: 5
        }, {
          value: '未上架',
          id: 6
        }
      ],
      chooseDate4: '',
      inputDate: '',
      // table数据
      tableData: [
        {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 11
            }, {
              name: '好吃的',
              id: 12
            }, {
              name: '好吃的',
              id: 13
            }, {
              name: '好吃的',
              id: 14
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 15
            }, {
              name: '好吃的',
              id: 16
            }, {
              name: '好吃的',
              id: 17
            }, {
              name: '好吃的',
              id: 18
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 19
            }, {
              name: '好吃的',
              id: 20
            }, {
              name: '好吃的',
              id: 21
            }, {
              name: '好吃的',
              id: 22
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 23
            }, {
              name: '好吃的',
              id: 24
            }, {
              name: '好吃的',
              id: 25
            }, {
              name: '好吃的',
              id: 26
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '上海市普陀区金沙江路 1518 弄',
          goodsTag: [
            {
              name: '好吃的',
              id: 27
            }, {
              name: '好吃的',
              id: 28
            }, {
              name: '好吃的',
              id: 29
            }, {
              name: '好吃的',
              id: 30
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 31
            }, {
              name: '好吃的',
              id: 32
            }, {
              name: '好吃的',
              id: 33
            }, {
              name: '好吃的',
              id: 34
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }, {
          goodsCode: '1809191158393198026',
          goodsName: '朗诺 冻干三文鱼 全犬种、全犬龄',
          firstClass: '狗',
          goodsTag: [
            {
              name: '好吃的',
              id: 35
            }, {
              name: '好吃的',
              id: 36
            }, {
              name: '好吃的',
              id: 37
            }, {
              name: '好吃的',
              id: 38
            }
          ],
          goodsPrice: '99',
          goodsStock: '30',
          goodsSales: '1999',
          goodsState: '已上架'
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    operation (type) {
      if (type === 'modify') {
        this.$message({
          type: 'info',
          message: '修改'
        })
        this.$router.push({
          name: 'goodsRelease',
          query: {
            goodsId: 1
          }
        })
      } else if (type === 'delete') {
        this.$message({
          type: 'info',
          message: '删除'
        })
      } else if (type === 'upper') {
        this.$message({
          type: 'info',
          message: '上架'
        })
      } else if (type === 'lower') {
        this.$message({
          type: 'info',
          message: '下架'
        })
      } else if (type === 'detail') {
        console.log('detail')
        this.detailLog = true
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox .tableList{
    /deep/ .el-table .cell{
      color:#000;
      font-weight: normal;
      text-align:center;
      line-height:25px;
    }
    /deep/ .el-table__body-wrapper tbody tr *{
      font-size:14px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell .tagS{
      border:1px solid #c7c7c7;
      padding: 5px;
      margin-bottom: 5px;
      margin-right:5px;
    }
    /deep/ .el-table__body-wrapper tbody tr td .cell a.oper{
      color: #008fff;
    }
    .el-pagination{
      margin-top: 40px;
      text-align: center;
    }
    .pagination /deep/ *{
      font-size: 16px;
    }
  }

  .el-dialog p{
    line-height:40px;
  }
  .el-dialog .guige{
    display: flex;
    margin-top:15px;
  }
  .el-dialog .guige .guiGe{
    flex:1;
    border:1px solid #cdcdcd;
    padding:10px;
  }
  .el-dialog .guige .guiGe p {
    line-height:30px;
  }

  .el-dialog .guige .guiGe .guigezhi{
    text-indent: 1em;
    margin-bottom: 10px;
  }
  .el-dialog .guige .guiGe .guigezhi span{
    margin-right: 5px;
    padding:3px;
    background: #e5e5e5;
  }
  .el-dialog .guige .guiGe .guigezhi span:last-child{
    margin-right:0;
  }
</style>
